<template>
  <div>
    <!-- 组织架构界面 -->
    <el-card class="tree-card">
      <!-- 头部 -->
      <treeTools :tree-node="company" is-root @addDepts="addDepts" />
      <!-- /头部 -->

      <!-- 身体 树状结构 -->
      <el-tree :data="departs" default-expand-all>
        <treeTools slot-scope="{ data }" :tree-node="data" @addDepts="addDepts" @delDepts="getDepartments()" @editDepts="editDepts" />
      </el-tree>
      <!-- /身体 -->
    </el-card>
    <!-- 增加部门，打开对话框 -->
    <addDepts ref="form" :visible.sync="dialogVisible" :tree-node="node" @addDept="getDepartments()" />
    <!-- /增加部门，打开对话框 -->
  </div>
</template>

<script>
import { getDepartmentList } from '@/api/departments'
import treeTools from './components/tree-tools.vue' // 引入组件
import { tranListToTreeData } from '@/utils/index'
import addDepts from './components/add-depts.vue'
export default {
  components: {
    treeTools,
    addDepts
  },
  data() {
    return {
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      company: {},
      dialogVisible: false,
      node: {} // 接受tree-tools组件传过来的值
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const { depts, companyName } = await getDepartmentList()
      // console.log(depts)
      this.departs = tranListToTreeData(depts, '')
      this.company = { name: companyName, manager: '负责人', id: '' }
    },
    // 新增部门自定义事件
    addDepts(treeNode) {
      this.dialogVisible = true
      this.node = treeNode
    },
    // 编辑部门自定义事件（回显数据）
    editDepts(treeNode) {
      this.dialogVisible = true
      this.node = treeNode
      this.$refs.form.getDepartmentDetail(treeNode.id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
